// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';
import * as ActionTypes from '../../constants/constants.js'

// antd 按需加载
import { Tabs, Toast } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { getAddressList, defaultAddress, deleteAddress } from './module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth } from '../../util/utils.js'
class Address extends Component {
  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      title: props.select ? '选择地址' : '收货地址'
    }
    this.getAddressList = getAddressList.bind(this)
    this.defaultAddress = defaultAddress.bind(this)
    this.deleteAddress = deleteAddress.bind(this)
  }

  componentDidMount() {
    const { } = this.props
    // InteractionManager.runAfterInteractions(() => {
    // ...耗时较长的同步执行的任务...
    this.getAddressList()
    // });
  }

  handleDefaultAddress(address) {
    this.defaultAddress({
      id: address.id,
    }).then(res => {
      console.log(res)
      this.getAddressList()
    })
  }

  handledeleteAddress(id) {
    this.deleteAddress({
      id,
    }).then(res => {
      this.getAddressList()
    })
  }

  handleSelectAddress(address) {
    const { dispatch } = this.props
    dispatch({
      type: ActionTypes.selectAddress,
      data: address
    })
    Actions.pop()
  }

  renderAddress() {
    const { addressList, type, select } = this.props
    return addressList.map((item, index) => {
      return (
        <View
          style={{
            backgroundColor: '#fff',
            marginBottom: 10,
            borderRadius: 6,
          }}
          key={index}
        >
          <TouchableOpacity
            style={{
              padding: 15,
              flexDirection: 'row',
              alignItems: 'center',
            }}
            onPress={() => {
              if (select) {
                this.handleSelectAddress(item)
              }
            }}
          >
            {/* <Icon name={'md-radio-button-on'} size={22} color={'#666'} /> */}
            <View style={{
              // marginLeft: 10,
              flex: 1
            }}>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>{item.name}</Text>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 30 }}>{item.phoneNumber}</Text>
                </View>
                <View style={{
                }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, textAlign: 'right' }}>
                    {item.defaultStatus == 1 ? '默认地址' : ''}
                  </Text>
                </View>
              </View>
              <View style={{
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }} numberOfLines={10} >{item.detailAddress}</Text>
              </View>
            </View>
          </TouchableOpacity>
          <View style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingHorizontal: 15,
            borderTopWidth: 1,
            borderTopColor: '#ececee',
          }}>
            <View style={{}}>
              {item.defaultStatus == 0 ? (
                <TouchableOpacity
                  style={{
                    height: 44,
                  }}
                  onPress={() => this.handleDefaultAddress(item)}
                >
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 44, textAlign: 'center' }}>设置默认地址</Text>
                </TouchableOpacity>
              ) : null}
            </View>
            <View style={{
              flexDirection: 'row',
              alignItems: 'center',
            }}>
              <TouchableOpacity
                style={{
                  height: 44,
                }}
                onPress={() => Actions.editAddress({ id: item.id })}
              >
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 44, textAlign: 'center' }}>编辑</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  height: 44,
                  marginLeft: 30
                }}
                onPress={() => {
                  this.handledeleteAddress(item.id)
                }}
              >
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 44, textAlign: 'center' }}>删除</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View >
      )
    })
  }

  render() {
    const { addressList } = this.props
    const { title } = this.state
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title={title}
          back={true}
        />
        <ScrollView style={[Style.content, {
          backgroundColor: '#e8e8ed'
        }]}>
          {this.renderAddress()}
        </ScrollView>
        <View style={{
          borderTopWidth: 1,
          borderTopColor: '#ececee',
        }}>
          <TouchableOpacity
            style={{
              padding: 15,
              flexDirection: 'row',
              alignItems: 'center',
              backgroundColor: '#fff',
              justifyContent: 'center',
            }}
            onPress={() => {
              Actions.editAddress()
            }}
          >
            <Icon name={'md-add'} size={22} color={'#666'} />
            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>添加收货地址</Text>
          </TouchableOpacity>
        </View>
      </View >
    );
  }
}


export default connect(({ addressList }) => ({
  addressList,
}))(pureRender(Address))
